<template>
  <div class="record-container">
    <p class="p1">约课记录</p>
    <!-- 标签栏 -->
    <van-tabs v-model="active">
      <van-tab title="待上课">
          <div class="record-wrapper1">
              <span class="p2">还有没有上课记录呢</span>
              <van-button type="warning" class="btn1" @click="goOne()">立即约课</van-button>
          </div>
      </van-tab>
      <van-tab title="已上课">
          <div class="record-wrapper2">
            <span class="p2">还有没有上课记录呢</span>
            <van-button type="warning" class="btn1" @click="goOne()">立即约课</van-button>
          </div>
      </van-tab>
      <van-tab title="已取消">
          <div class="record-wrapper3">
               <span class="p2">还有没有取消上课记录呢</span>
          </div>
          </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "demo",
  props: [],
  components: {},
  data() {
    return {
      active: 0,
      id:43,
    };
  },
  computed: {},
  watch: {},
  methods: {
      goOne(){
         this.$router.push({
            path:"onetoone", 
            query:{
                id:this.id,
            }
         })
      }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {}
};
</script> 
<style lang="scss">
.p1 {
  font-size: 0.4rem;
  font-weight: bold;
  text-align: center;
}
.record-wrapper1{
    width:100%;
    height:80vh;
    background-color:rgb(188, 212, 219);
    display:inline-flex;
    flex-wrap: wrap;
   .p2{
       color:gray;
       font-size:0.32rem;
      margin-left: 3.2rem;
      margin-top: 2rem;
   }
   .btn1{
       margin-left: -2.3rem;
       margin-top: 4rem;
   }
}
.record-wrapper2{
    width:100%;
    height:80vh;
    background-color:lightblue;
    display:inline-flex;
    flex-wrap: wrap;
   .p2{
       color:gray;
       font-size:0.32rem;
      margin-left: 3.2rem;
      margin-top: 2rem;
   }
   .btn1{
       margin-left: -2.3rem;
       margin-top: 4rem;
   }
}
.record-wrapper3{
    width:100%;
    height:80vh;
    background-color:lightblue;
    display:inline-flex;
    flex-wrap: wrap;
   .p2{
       color:gray;
       font-size:0.32rem;
      margin-left: 3.2rem;
      margin-top: 2rem;
   }
  
}

</style>
